<template>
  <div class="myinfo">
    <el-row>
      <el-col>个人信息</el-col>
    </el-row>
    <el-row>
      <el-col class="avatar-box">
      	<div class="pic_box"
      			   v-loading="loading"
					    element-loading-text="加载中"
					    element-loading-spinner="el-icon-loading"
					    element-loading-background="rgba(0, 0, 0, 0.5)">
      		<img v-bind:src="imgUrl"/>
      		<!--<img src="../../assets/pic.png" />-->

      	</div>

        <!--<el-button @click="avatar_btn" size="small" type="info">更改</el-button>-->
        <el-upload
				  class="upload-demo"
				  :action="exportUrlinfo"

    			:show-file-list="false"
    			:on-progress="handlePreview"
    			:on-success="handlesuccess"
    			:on-error="handleerror"
    			:before-upload="beforeAvatarUpload"
				 >
				  <el-button size="small" type="primary">更改头像</el-button>
				</el-upload>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="7" :offset="8">
        <el-form ref="form" :model="form" label-width="80px" size="small">

           <el-form-item label="工号:">
              <span v-model="form.name">{{form.name}} (不可更改)</span>
            </el-form-item>

            <!--<el-form-item label="权限:">
              <span v-model="form.quan">{{form.quan}}</span>
            </el-form-item>-->

            <el-form-item label="姓名:">
              <span v-model="form.username">{{form.username}} (不可更改)</span>
            </el-form-item>

            <el-form-item label="类型:">
              <span v-model="form.type">{{form.type}} (不可更改)</span>
            </el-form-item>

            <el-form-item label="手机号:">
              <el-input v-model="form.mobile"></el-input>
            </el-form-item>

            <!--<el-form-item label="电子邮箱:">
              <span v-model="form.email">{{form.email}}(注册后不可更改)</span>
            </el-form-item>-->
             <el-form-item label="电子邮箱:">
              <el-input v-model="form.email">{{form.email}}</el-input>
            </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col class="btns-box">
        <el-button type="primary" size="small"  @click="submit()">提交更改</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'MyInfo',
  data () {
    return {
    	form: {
          name: 'amdin',
          username:'',
          type:'amdin',
          mobile:'00000000000',
          email:''
       },
      loading: false,
//    imgUrl:'/static/pic.png'
			imgUrl:require('../../assets/pic.png')
    }
  },
    created: function () {
    // `this` 指向 vm 实例
				let user_info =JSON.parse(localStorage.getItem('userinfo'));  //个人信息
				console.log(user_info)
				this.form.name=user_info.name;
				this.form.username=user_info.username;
				this.form.type=user_info.type;
				this.form.mobile=user_info.mobile;
				this.form.email=user_info.email;

	},
 computed: {
    exportUrlinfo() {
      return `${EHS.HSOT}/api/v1/upload`
    }
	},
  methods: {
    submit () {
//    console.log(this.form)
//    this.$message.info({
//      message: `提交更改`
//    })
				let parinfo=this.form;

				if(!(/^1[34578]\d{9}$/.test(parinfo.mobile))){
				        alert("手机号码有误，请重填");
				        return false;
				   }
				 var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
				    if (!re.test(parinfo.email)) {
				    	   alert("邮箱有误，请重填");
				        return false;
				    }
				this.$API.resetInfo({'mobile' :parinfo.mobile,'email' :parinfo.email})
						.then(data => {
							console.log(data)
							window.localStorage.setItem('userinfo', JSON.stringify(data))
							this.$message.info({
			            message: `个人信息更改成功`
							})
						})
    },

		 handlePreview(event, file, fileList) {
        this.loading=true;
        console.log(this.loading)
      },
      handlesuccess(response, file, fileList) {
        console.log(response);
        this.imgUrl=response.data.url;
        this.loading=false;
      },
      handleerror(err, file, fileList) {
        this.loading=false;
        console.log(err)
        this.$message({
	            type: 'error',
	            message: err
		      	});
      },
       beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        let $flag=false;
        if(isJPG||isPNG){ $flag=true;}
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!$flag) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return $flag && isLt2M;
      }
//  avatar_btn () {
//    this.$message.info({
//      message: `更换头像`
//    })
//  }
  }
}

</script>

<style>
.myinfo .avatar-box,  .myinfo .btns-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.myinfo .avatar-box img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin-bottom: 10px;
}
.pic_box{ width: 90px;  margin-bottom: 10px; border-radius: 50%;    overflow: hidden;
  height: 90px;}
</style>
